<template>
	<div class="lietou-list content">
		<div class="lietou-right">
			<el-form ref="form" label-width="120px" size="small">
				<el-form-item label="公司分佣:" label-width="80px">
					<span>{{form.company}}</span>
				</el-form-item>
				<el-form-item label="代理商默认分佣:">
					<span>{{form.default}}</span>
				</el-form-item>
				<el-form-item style="margin-left:-100px;">
          <el-button  type="success" class="buttonStyle" @click="addHandle">编辑</el-button>
				</el-form-item>
			</el-form>
		</div>

    <el-dialog title="添加内部管理员" :visible.sync="showAddWin" class="form">
      <el-form :model="form" :rules="rules" autocomplete="on" label-width="140px" ref="form">
        <el-form-item label="公司分佣：" prop="company" required>
          <el-input v-model="form.company" autocomplete="on" type="text" placeholder="请输入公司分佣比例" clearable></el-input>
        </el-form-item>
        <el-form-item label="代理商默认分佣："  prop="default" required>
          <el-input v-model="form.default" autocomplete="on"  clearable placeholder="请输入手机号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddWin = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitPwd">确 定</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'InnerPercent',
		data() {
      const validateCompany = (rule, value, callback) => {
        	if (value.length < 1) {
        		callback(new Error('请输入公司分佣比例！'))
        	} else {
        		callback()
        	}
      }
      const validateDefault = (rule, value, callback) => {
        	if (value.length < 1) {
        		callback(new Error('请输入代理商默认分佣比例！'))
        	} else {
        		callback()
        	}
      }
			return {
				form:{
				  company: '23',
				  default: '12',
				},
				rules: {
					company: [{ required: true, trigger: 'blur', validator: validateCompany }],
          default: [{ required: true, trigger: 'blur', validator: validateDefault }],
				},
        showAddWin: false //弹框的显示和隐藏
			}
		},
		async created() {
		   // this.loadData();
		},
		methods:{
			async loadData() {
			  const loading = this.$loading({
			    lock: true,
			    text: 'Loading',
			    spinner: 'el-icon-loading',
			    background: 'rgba(0, 0, 0, 0.5)'
			  });
			  try {
			   let data = {
			      "type": this.type,
			      "content": this.title,
			      "phone": this.phone,//手机号
			      "state": this.isAnswer,

			      "start_create_date": this.createDate!=null ? this.createDate[0]:'',//时间范围开始时间
			      "end_create_date": this.createDate!=null? this.createDate[1]: '',//时间范围结束时间
			      "pageNo": this.pageNo,//分页页码
			      "pageSize": this.pageSize,//分页每页数量
			    }
			    let res = await this.$http({
			      url: 'disposefeedbackList',
			      method: 'post',
			      data: data
			    });
			    let tData = res.feedbackPage;
			    this.pageCount = tData.pages; //总页数
			    this.pageNo = tData.pageNum; //当前页 size当前页
			    this.tableData = tData.list;

			    loading.close();
			  } catch (e) {
			    console.log(e)
			    loading.close();
			  }
			},
      // 添加
      addHandle(){
      	this.showAddWin = true;
      },
      // 确定添加
      onSubmitPwd(){
        this.$refs.form.validate(valid => {
          if(valid){
            this.showAddWin = false;
          }
        })
      }
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.el-button.buttonStyle{
	  height: 32px;
	  font-size: 14px;
	  font-family: PingFangSC-Medium, PingFang SC;
	  font-weight: 500;
	  color: #FFFFFF;
	  background:#3674FF;
	  border-radius: 5px;
	  border:0;
	  margin-left:6px;
	  margin-top:2px;
    width:100px;
	}
	.answerTable{
		margin-top:15px;
	}
	.lietou-right{
		margin-top:30px;
	}
</style>
